<template>
  <div v-loading="loading" class="cash">
    <div class="get-cash-apply">
      <h4>提现申请</h4>
      <div>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="80px"
          class="demo-ruleForm"
          label-position="left"
        >
          <el-form-item label="账户余额:">
            <div>{{ ruleForm.userBalance|filterPrice }}元</div>
          </el-form-item>
          <template v-if="active>2">
            <el-form-item label="提现金额:" prop="getCash" class="get-cash-money">
              <el-input v-model="ruleForm.getCash" type="text" placeholder="输入提现金额" />&emsp;元
            </el-form-item>
            <el-form-item label="提现方式:">
              <el-select v-model="ruleForm.cashType" placeholder="请选择提现方式">
                <el-option
                  v-for="item in option"
                  :key="item.id"
                  :label="item.lable"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </template>
          <el-form-item v-else label-width="0">
            <el-steps :active="active" align-center process-status="wait" status="wait">
              <el-step title="申请提现" />
              <el-step title="审核中" />
              <el-step :title="recordDetail[0].cashType === '01700001'?'提现到支付宝账户':'提现到微信账户'" />
              <el-step title="提现成功" />
            </el-steps>
            <div class="step-content">
              <div style="margin-left:8%;">
                <div>提现金额：{{ recordDetail[0].cashMoney|fixedPrice }}</div>
                <div>{{ recordDetail[0].applyDate?recordDetail[0].applyDate:null |getDate }}</div>
              </div>
              <div style="margin-left:8%;">
                <div style="min-width:220px;">3个工作日内完成审核，请耐心等待</div>
              </div>
              <div />
              <div />
            </div>
          </el-form-item>
          <el-form-item label-width="0">
            <el-button v-if="active>2" type="primary" @click="submitForm('ruleForm')">提交申请</el-button>
            <el-button v-else type="primary" @click="sureApplyFalse(recordDetail[0].id)">取消申请</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="get-cash-record">
      <h4>
        <p>提现记录</p>
        <div>
          <span>提现方式：</span>
          <el-select v-model="checkoutSelect" placeholder="请选择" @change="checkWayToFind()">
            <el-option
              v-for="(item,i) in option"
              :key="i"
              :label="item.lable"
              :value="item.value"
            />
          </el-select>
        </div>
      </h4>
      <div v-if="getCashRecordList[0]">
        <table border="0" cellpadding="0" cellspacing="0" align="center">
          <thead>
            <tr>
              <th style="text-indent:10px;">序号</th>
              <th>申请时间</th>
              <th style="min-width:100px;">提现方式</th>
              <th class="text_align_center" style="min-width:110px;">提现金额（元）</th>
              <th>审核时间</th>
              <th>到账时间</th>
              <th style="min-width:80px;">状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,i) in getCashRecordList" :key="i">
              <td
                style="min-width:56px;text-indent:10px;"
              >{{ (i+1+(currentPage-1)*pageSize)|filterNumber }}</td>
              <td class="color838A9D">{{ item.applyDate|getDate }}</td>
              <td>{{ item.cashType==='01700001'?'支付宝':item.cashType==='01700002'?'微信':null }}</td>
              <td class="text_align_center font_weight600">{{ item.cashMoney|filterPrice }}</td>
              <td class="color838A9D">{{ item.auditDate|getDate }}</td>
              <td class="color838A9D">{{ item.arrivalDate|getDate }}</td>
              <td :class="{ colorF75757:item.cashStatus==='00100003'?true:false }">
                <span v-if="item.cashStatus==='00100003'?true:false">未通过&ensp;</span>
                <span v-else>{{ item.cashStatus|filterStatus }}&ensp;</span>
                <el-tooltip class="item" effect="dark" :content="item.refusalCause" placement="top">
                  <i
                    v-show="item.cashStatus==='00100003'?true:false "
                    class="el-icon-warning-outline"
                    style="cursor:pointer;"
                  />
                </el-tooltip>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, sizes, jumper"
            :total="noticeCount"
            :hide-on-single-page="true"
            :page-sizes="[6,10, 20, 50, 100]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div v-else class="none">
        <div>暂无提现记录</div>
      </div>
    </div>
    <div class="binding-message">
      <div>提现规则</div>
      <div>
        <div>提现对公账户</div>
        <div>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。这里可以放一些关于产品的常见问题说明。</div>
      </div>
      <div>
        <div>提现对公账户</div>
        <div>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。这里可以放一些关于产品的常见问题说明。</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDate, getTime } from '@/utils/date';
import { mapGetters } from 'vuex';
import {
  getCashOut,
  addCashOut,
  getUserbalance,
  updateCashOut,
  getAccount
} from '@/api/finance';
export default {
  filters: {
    filterNumber: function(value) {
      function addZeroPrefix(number) {
        return number < 10 ? `0${number}` : number;
      }
      return addZeroPrefix(value);
    },
    getDate: value => {
      if (value) {
        const date = new Date(value);
        return getDate(date) + ' ' + getTime(date, true);
      } else {
        return;
      }
    },
    filterStatus: value => {
      switch (value) {
        case '00100001':
          return '审核中';
        case '00100002':
          return '审核通过';
        case '00100003':
          return '未通过';
        case '00100004':
          return '未提交';
        case '00100005':
          return '已取消';
        default:
          return '未知情况';
      }
    }
  },
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        callback(new Error('提现金额不能为空'));
        return;
      }
      if (parseFloat(value)) {
        if (value > 0) {
          if (value > this.ruleForm.userBalance / 100) {
            callback('提现金额大于账户余额！');
          } else {
            callback();
          }
        } else {
          callback(new Error('不能为负数'));
        }
      } else {
        callback(new Error('只能输入数字且不为零'));
      }
    };
    return {
      ruleForm: {
        userBalance: 0,
        getCash: null,
        cashType: ''
      },
      option: [],
      rules: {
        getCash: [{ validator: checkAge, trigger: 'change' }]
      },
      getCashRecordList: [],
      getCashMoneyInfo: {
        money: 200,
        time: 1584611981380,
        info: '3个工作日内完成审核，请耐心等待'
      },
      // 备份
      data: [],
      // 分页
      currentPage: 1,
      pageSize: 6,
      noticeCount: 0,
      // step选中
      active: 3,
      // 选择查询
      checkoutSelect: '',
      loading: false,
      // 提现申请
      moneyFlag: false,
      recordDetail: []
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  created() {
    // 获取是否有提现
    this.accountDetail();
    this.getAccountList();
    this.getRecord();
    this.getUserbalance();
  },
  methods: {
    submitForm(formName) {
      if (this.return) return;
      if (this.ruleForm.cashType) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '返回',
              type: 'warning'
            })
              .then(() => {
                const param = {
                  // cashType:”01700001支付宝 01700002微信” ”cashMoney”:”提现金额”，””:””}
                  cashType: this.ruleForm.cashType,
                  cashMoney: this.ruleForm.getCash * 100,
                  shopId: this.shopInfo.id
                };
                addCashOut(param).then(res => {
                  if (res.code === '0000') {
                    this.$message({
                      type: 'success',
                      message: '申请成功!'
                    });
                    this.getUserbalance();
                    this.getRecord();
                    this.currentPage = 1;
                    this.accountDetail();
                  } else {
                    this.$message({
                      type: 'error',
                      message: '申请失败!'
                    });
                  }
                });
              })
              .catch(() => {});
          } else {
            return false;
          }
        });
      } else {
        return;
      }
    },
    // 提现记录查询
    checkWayToFind() {
      this.currentPage = 1;
      this.getRecord(1, this.pageSize, this.checkoutSelect);
    },
    // 每页多少条
    handleSizeChange(val) {
      this.pageSize = val;
      this.getRecord(this.currentPage, val, this.checkoutSelect);
    },
    // 当前页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getRecord(this.currentPage, this.pageSize, this.checkoutSelect);
    },
    // 取消申请
    sureApplyFalse(id) {
      this.$confirm('确认取消申请？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '返回',
        type: 'warning'
      })
        .then(() => {
          const param = {
            id
          };
          updateCashOut(param).then(res => {
            if (res.code === '0000') {
              this.getRecord();
              this.currentPage = 1;
              this.accountDetail();
              this.$message({
                type: 'success',
                message: '取消申请成功!'
              });
            } else {
              this.$message({
                type: 'error',
                message: '取消申请失败!'
              });
            }
          });
        })
        .catch(() => {});
    },
    // 获取提现方式
    getAccountList() {
      const param = {
        shopId: this.shopInfo.id
      };
      getAccount(param).then(res => {
        const arr = [];
        for (const item of res.data) {
          arr.push(item.type);
        }
        this.option = [...new Set(arr)];
        this.option = this.option.map(item => {
          return {
            value: item,
            lable:
              item === '01700001'
                ? '支付宝'
                : item === '01700002'
                  ? '微信'
                  : null
          };
        });
      });
    },
    // 获取提现记录
    getRecord(pageNo = 1, pageSize = 6, type = '') {
      this.loading = true;
      const param = {
        shopId: this.shopInfo.id,
        pageNo,
        pageSize,
        type,
        status: ''
      };
      getCashOut(param)
        .then(res => {
          this.ruleForm.cashType = this.option[0].value;
          this.getCashRecordList = res.data.cashout;
          this.data = res.data.cashout;
          this.noticeCount = res.data.size;
          this.loading = false;
        })
        .catch(res => {
          this.loading = false;
        });
    },
    // 是否有提现记录
    accountDetail() {
      const param = {
        shopId: this.shopInfo.id,
        status: '00100001',
        type: ''
      };
      getCashOut(param).then(res => {
        this.recordDetail = res.data.cashout;
        if (res.data.cashout && res.data.cashout[0]) {
          this.moneyFlag = true;
          this.active = 2;
        } else {
          this.active = 3;
        }
      });
    },
    // 获取账户余额
    getUserbalance() {
      const param = {
        id: this.shopInfo.id
      };
      getUserbalance(param).then(res => {
        this.ruleForm.userBalance = res.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
$borderColor: #e4e9ef;
$messagecolor: #838a9d;
.cash {
  background: #fff;
  padding: 60px 14%;
  color: #3c4353;
  & > div {
    border-bottom: 1px solid #e9e9e9;
    padding: 0 5% 30px 5%;
    h4 {
      font-size: 16px;
      background: url("../../assets/images/iconbg-nav.png") no-repeat 0 2px;
      background-size: 5px 12px;
      text-indent: 10px;
    }
    & > div {
      margin-left: 10px;
    }
    &:last-child {
      border: none;
    }
  }
  .get-cash-apply {
    /deep/.el-input__inner {
      height: 36px;
      width: 190px;
    }
    /deep/.el-input {
      height: 36px;
      width: 190px !important;
    }
    .el-form {
      .el-form-item {
        .step-content {
          display: flex;
          width: 100%;
          color: $messagecolor;
        }
      }
      .get-cash-money {
        .el-input {
          width: 200px;
        }
      }
    }
  }
  .get-cash-record {
    margin-top: 30px;
    h4 {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      /deep/.el-input__inner {
        height: 36px;
        width: 190px;
      }
      & > div {
        font-weight: 400;
        /deep/.el-input {
          display: flex;
        }
        span {
          font-size: 14px;
        }
      }
    }
    table {
      width: 100%;
      text-align: left;
      font-size: 14px;
      thead {
        background: #f6f8f9;
        th {
          height: 54px;
          border-bottom: 1px solid $borderColor;
          border-top: 1px solid $borderColor;
          &:first-child {
            border-left: 1px solid $borderColor;
          }
          &:last-child {
            border-right: 1px solid $borderColor;
          }
        }
      }
      tbody {
        tr {
          height: 54px;
          td {
            border-bottom: 1px solid $borderColor;
            &:first-child {
              border-left: 1px solid $borderColor;
            }
            &:last-child {
              border-right: 1px solid $borderColor;
            }
          }
        }
      }
    }
  }
  .binding-message {
    padding: 20px 0 0 5%;
    color: $messagecolor;
    font-size: 14px;
    & > div {
      padding-top: 12px;
      line-height: 22px;
    }
  }
}
.el-steps {
  text-indent: 0px;
  text-align: left;
  margin-top: 30px;
  margin-bottom: 10px;
  /deep/.el-step__head {
    color: #bfbfbf;
    font-size: 12px;
    height: 32px;
    .el-step__icon {
      background: #bfbfbf;
      text-indent: -999999px;
      border: none;
      width: 10px;
      height: 10px;
    }
  }
  /deep/.el-step__head.is-finish {
    color: #1890ff;
    .el-step__icon {
      text-indent: -999999px;
      background: #1890ff;
      width: 10px;
      height: 10px;
    }
  }
  /deep/.el-step__line {
    margin: 7px 10px 0 10px !important;
  }
  /deep/.el-step__title.is-finish {
    color: #3c4353;
    font-weight: 600;
  }
}

/deep/.el-form-item__label {
  padding-right: 0;
}
/deep/.el-button {
  height: 36px;
  padding: 0;
  line-height: 36px;
  width: 100px;
}
.color838A9D {
  color: #838a9d;
  min-width: 150px;
}
.text_align_center {
  text-align: center;
}
.colorF75757 {
  color: #f75757;
}
.font_weight600 {
  font-weight: 600;
}
.none {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 54vh;
  align-items: center;
  & > div {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.25);
    &:before {
      content: "";
      display: inline-block;
      height: 24px;
      width: 50px;
      background: url("../../assets/images/icon-cry.png") no-repeat center;
      background-size: 24px 24px;
    }
  }
}
//分页
.pagination {
  margin-top: 18px;
  text-align: center;
  /deep/.el-input__inner {
    height: 28px;
  }
}
.main-product-icon {
  width: 77px;
  height: 20px;
  background: rgba(230, 247, 255, 1);
  border-radius: 11px;
  text-align: center;
  color: #1182fb;
}
.stock-less-icon {
  display: inline-block;
  width: 66px;
  height: 20px;
  text-align: center;
  position: relative;
  top: 5px;
  div {
    background: rgba(247, 87, 87, 1);
    border-radius: 10px;
    opacity: 0.1;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  span {
    display: inline-block;
    width: 100%;
    line-height: 20px;
    color: #e9433a;
    position: absolute;
    z-index: 1;
    left: 0;
    opacity: 0.8;
  }
}
.none {
  height: 500px;
  width: 100%;
  line-height: 500px;
  text-align: center;
  background: #fff;
}
</style>
